<script lang="ts" setup>
import to from 'await-to-js'
// import type { FormInstance } from 'element-plus'
// import type { CaseInfo, HandleType } from './type'
// import { addCase, editCase, getTagDict, getRecommendTag } from '@partner/api/case'
// import OneEditer from '@/component/public/editer/OneEditer.vue'
// import OneUploadImage from '@/component/public/upload/OneUploadImage.vue'
// import ElSelectRecomendTag from '@operation/component/ElSelectRecomendTag.vue'
// import { validNumber, validNaturalNumber, validDecimal } from '@/utils/element/validate'
// import { useDict } from '@/utils/common/dict'

// const { caseRecommend, caseTag: caseTagList } = useDict('caseRecommend', 'caseTag')

defineOptions({
  name: 'UserDetail'
})

const emit = defineEmits(['close'])
const props = defineProps<{
  currentRow: CaseInfo | undefined
  type: HandleType
}>()

const title = '详情'
const isLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(true)
const formInline = ref(props.currentRow)
const imageUrl = ref<String>('')

const data = reactive({
  ruleForm: {
    caseRecommend: [],
    caseInfo: {
      homepageShow: '1'
    },
    caseSolutioninfo: {},
    caseApplyeffectList: [
      {
        applyeffectName: '',
        applyeffectContent: ''
      },
      {
        applyeffectName: '',
        applyeffectContent: ''
      },
      {
        applyeffectName: '',
        applyeffectContent: ''
      }
    ],
    saas: [{}],
    privatizationDeployment: {}
  },
  rules: {
    'caseInfo.caseName': [{ required: true, message: '请填写' }],
    'caseInfo.caseAbstract': [{ required: true, message: '请填写' }],
    'caseInfo.caseBackground': [{ required: true, message: '请填写' }],
    'caseInfo.caseIntroduction': [{ required: true, message: '请填写' }],
    'caseInfo.appliedTo': [{ required: true, message: '请填写' }],
    'caseSolutioninfo.solutionContent': [{ required: true, message: '请填写' }],
    'privatizationDeployment.salesPrice': [{ required: true, message: '请填写' }],
    'caseInfo.caseImgurl': [{ required: true, message: '请上传' }],
    'caseInfo.recommendUrl': [{ required: true, message: '请上传' }],
    caseTagList: [{ required: true, message: '请选择' }],
    'caseInfo.homepageShow': [{ required: true, message: '请选择' }],
    caseRecommend: [{ required: true, message: '请选择' }]
  }
})
const { ruleForm, rules } = toRefs<any>(data)

const handleSubmit = async () => {
  if (!ruleFormRef.value) return
  const validate = await to(ruleFormRef.value.validate())
  if (!validate[1]) return
  const data = JSON.parse(JSON.stringify(ruleForm.value))
  // data.caseTagList = [data.caseTagList]
  isLoading.value = true
  const [err] = await to(props.type === 'add' ? addCase(data) : editCase(data))
  isLoading.value = false
  if (err) return
  ElMessage.success('操作成功')
  emit('close', true)
  dialogVisible.value = false
}

const deploymentChange = (val: 1 | 0) => {
  ruleForm.value.privatizationDeployment = {}
}
const saasChange = (val: 1 | 0) => {
  ruleForm.value.saas = val ? [{}] : null
}

onMounted(() => {
  if (props.currentRow) {
    const data = JSON.parse(JSON.stringify(props.currentRow))
    // if (data.caseTagList.length > 0) {
    //   data.caseTagList = data.caseTagList[0]
    //   data.caseTagList.dictName = data.caseTagList.tagName
    // }
    console.log(data)
    ruleForm.value = data
  }
})

// onMounted(async () => {
//   const [err, res] = await to(getTagDict())
//   if (err) return
//   caseTagList.value = res.data
//   console.log(caseTagList.value)
// })
</script>

<template>
  <el-drawer v-model="dialogVisible" :title="title" size="1200px" class="one-drawer ability-container" @close="emit('close')">
    <div class="ability-modal">
      <!-- <div class="mask"></div> -->
      <div class="form">
        <!-- <div class="title"></div> -->
        <div class="content">
          <el-form :model="formInline">
            <el-row style="display: flex; justify-content: space-between">
              <el-col :span="11">
                <el-form-item label="能力名称">
                  <el-input v-model="formInline.name" placeholder="Approved by" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="交付方式">
                  <el-input v-model="formInline.method" placeholder="Approved by" clearable />
                  <!-- <el-select v-model="formInline.jhfs" placeholder="Activity zone" clearable>
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select> -->
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="display: flex; justify-content: space-between">
              <el-col :span="11">
                <el-form-item label="申请单号">
                  <el-input v-model="formInline.Request_No" placeholder="Approved by" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="能力分类">
                  <el-input v-model="formInline.type" placeholder="Approved by" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <div class="wrapper-outer">
                <div class="header"> 服务列表 </div>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-input disabled placeholder="服务名称" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>

            <el-row style="display: flex; justify-content: space-between">
              <el-col :span="11">
                <el-form-item label="能力标签">
                  <el-input v-model="formInline.user" placeholder="Approved by" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="推荐标签">
                  <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="display: flex; justify-content: space-between">
              <el-col :span="24">
                <el-form-item label="摘要描述">
                  <el-input v-model="formInline.miaoshu" placeholder="Approved by" maxlength="100" type="textarea" clearable />
                </el-form-item>
              </el-col>
            </el-row>

            <!--  上传  -->
            <el-form-item label="封面" label-width="90">
              <el-upload
                class="avatar-uploader"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <div style="margin-left: 90px; font-size: 12px" class="tip"
              >请上传260*160像素的图片，格式为png、jpg、jpeg，图片大小不超过2M</div
            >

            <el-row>
              <div class="topic-head"> 能力运营信息 </div>
              <div class="wrapper-outer">
                <div class="header"> 能力功能 </div>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="优势1" label-width="68">
                      <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="优势简介">
                      <el-input placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label-width="68">
                      <div class="add-item"> +添加 </div>
                      <!-- <el-input disabled placeholder="Approved by" clearable /> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="wrapper-outer">
                <div class="header"> 能力优势 </div>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="优势1" label-width="68">
                      <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="优势简介">
                      <el-input placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label-width="68">
                      <div class="add-item"> +添加 </div>
                      <!-- <el-input disabled placeholder="Approved by" clearable /> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="wrapper-outer">
                <div class="header"> 典型应用场景 </div>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="场景一" label-width="68">
                      <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="场景简介">
                      <el-input placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label-width="68">
                      <div class="add-item"> +添加 </div>
                      <!-- <el-input disabled placeholder="Approved by" clearable /> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="wrapper-outer">
                <div class="header">
                  <!-- <div class="title">
                    使用案例
                  </div> -->
                  使用案例
                  <span>考虑门户展示效果，建议上传的案例数为偶数个。</span>
                </div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="案例一" label-width="68">
                      <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                    </el-form-item>
                    <div style="position: relative">
                      <el-form-item label="案例主图" label-width="68">
                        <el-upload
                          class="avatar-uploader"
                          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                      </el-form-item>
                      <div style="font-size: 12px; position: absolute; width: 168px; bottom: 0; right: 0; color: #d7d7d7"
                        >请上传260*160像素的图片，格式为png、jpg、jpeg，图片大小不超过2M</div
                      >
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="案例简介" label-width="68">
                      <div class="tall-textarea">
                        <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" type="textarea" clearable />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label-width="68">
                      <div class="add-item"> +添加 </div>
                      <!-- <el-input disabled placeholder="Approved by" clearable /> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>

            <!--  -->
            <el-row>
              <div class="topic-head">能力提供方信息</div>
              <div style="padding-top: 20px" class="wrapper-outer">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="提供方单位" label-width="68">
                      <el-input v-model="formInline.tigongfang" maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系人">
                      <el-input v-model="formInline.lianxiren" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="联系电话">
                      <el-input v-model="formInline.lianxiphone" placeholder="Approved by" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label-width="68">
                      <div class="add-item"> +添加 </div>
                      <!-- <el-input disabled placeholder="Approved by" clearable /> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>

            <el-divider />
            <div class="topic-head"> 能力版本信息 </div>
            <el-row>
              <el-col :span="6">
                <el-form-item label="当前版本" label-width="68">
                  <el-input maxlength="10" :show-word-limit="true" placeholder="Approved by" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <div class="topic-head">能力交付管理</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="当前版本" label-width="68">
                  <el-upload
                    class="small-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                  <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="当前版本" label-width="68">
                  <el-upload
                    class="small-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                  <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="topic-head">能力部署包管理</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="当前版本" label-width="68">
                  <el-upload
                    class="small-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                  <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.ability-container {
  // height: 100%;
  // padding: 20px 10px;
  // position: relative;
  .main-content {
    .table-container {
      padding-left: 20px;
      width: 1300px;

      .table-body {
        min-height: 450px;
        max-height: 450px;
        overflow: auto;
      }
    }
    .pagination {
      margin-top: 30px;
      display: flex;
      flex-direction: row-reverse;
      padding-right: 100px;
    }
  }
  .ability-modal {
    // position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    // background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      // background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
    .form {
      // width: 70%;
      height: 80%;
      background-color: #fff;
      margin: 0 auto;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      .content {
        flex: 1;
        overflow: auto;
        border-top: var(--el-border);
        padding: 10px 40px;
        .tall-textarea {
          width: 100%;
          .el-textarea {
            :deep(.el-textarea__inner) {
              height: 158px;
            }
          }
        }
        .upload-tip {
          font-size: 12px;
          color: #d7d7d7;
        }
        .small-uploader {
          width: 145px;
          height: 30px;
          display: block;
          border: 1px solid var(--el-border-color);
          .el-icon.avatar-uploader-icon {
            font-size: 18px;
            color: #8c939d;
            width: 145px;
            height: 30px;
            text-align: center;
          }
        }
        .avatar-uploader {
          width: 145px;
          height: 105px;
          display: block;
          border: 1px dashed var(--el-border-color);
          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 145px;
            height: 105px;
            text-align: center;
          }
        }
        .flex-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        .topic-head {
          height: 50px;
          line-height: 50px;
          transform: translateX(-20px);
        }
        .wrapper-outer {
          padding: 0 10px;
          border: var(--el-border);
          border-radius: 3px;
          width: 100%;
          margin-bottom: 18px;
          // padding-top: 10px;
          .header {
            height: 50px;
            margin-bottom: 10px;
            border-bottom: var(--el-border);
            color: #939397;
            display: flex;
            align-items: center;
            .title {
              font-size: 14px;
            }
            span {
              font-size: 12px !important;
              margin-left: 10px;
            }
          }
          .add-item {
            color: #02a7f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            background-color: rgb(247, 252, 255);
            width: 100%;
            height: 30px;
            border: 1px dashed rgb(182, 229, 251);
          }
          .content {
            padding: 10px 0;
            display: flex;
            width: 100%;
            justify-content: space-between;
          }
        }
      }
      .title,
      .footer {
        height: 50px;
      }
      .footer {
        width: 100%;
        display: flex;
        // justify-content: ;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 10px;
        border-top: 1px solid #e5e7eb;
      }
    }
  }
}
</style>
